<template>
  <div id="my-container">
    <!-- 头部 -->
    <div class="top-container">
      <!-- 个人信息 -->
      <div class="top">
        <div class="top-left">
          <h2 class="nickname">{{userInfo.nickname}}</h2>
          <p class="signature">{{userInfo.intro}}</p>
        </div>
        <div class="top-right" @click="hToMyInfo">
          <img :src="avatarUrl" alt="">
        </div>
      </div>
      <!-- 题目相关 -->
      <div class="bottom">
        <ul>
          <li>
            <span class="num">11</span>
            <span class="sub">累计题目</span>
          </li>
          <li>
            <span class="num">22</span>
            <span class="sub">收藏题目</span>
          </li>
          <li>
            <span class="num">33</span>
            <span class="sub">我的错题</span>
          </li>
          <li>
            <span class="num">44<i>%</i></span>
            <span class="sub">正确率</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom-container">
      <!-- 单独一个单元格 -->
      <mm-cell
        class="one-cell circle"
        title='我的岗位'
        :value='userInfo.position'
        icon='iconicon_mine_gangwei'
        @click="hEditJob('position')"
      >
      </mm-cell>
      <!-- 面经数据 -->
      <div class="data-show circle">
        <h2 class="title">面经数据</h2>
        <ul class="data-group">
          <li>
            <div class="up-num">
              昨日阅读
              <span>+300</span>
            </div>
            <div class="all-num">563</div>
            <div class="all-name">阅读总数</div>
          </li>
          <li>
            <div class="up-num">
              昨日获赞
              <span>+232</span>
            </div>
            <div class="all-num">200</div>
            <div class="all-name">获赞总数</div>
          </li>
          <li>
            <div class="up-num">
              昨日新增
              <span>+100</span>
            </div>
            <div class="all-num">197</div>
            <div class="all-name">评论总数</div>
          </li>
        </ul>
      </div>
      <!-- 单元格们 -->
      <div class="cell-group circle">
        <mm-cell value='21' icon='iconicon_mine_mianjing' title='我的面经分享'></mm-cell>
        <mm-cell value='98' icon='iconicon_mine_xiaoxi' title='我的消息' @click="hToMyMessage"></mm-cell>
        <mm-cell value='32' icon='iconicon_mine_tikushoucang' title='收藏的题库'></mm-cell>
        <mm-cell value='32' icon='iconicon_mine_qiyeshoucang' title='收藏的企业'></mm-cell>
        <mm-cell value='123' icon='iconicon_mine_cuoti' title='我的错题'></mm-cell>
        <mm-cell value='166' icon='iconxingxing2' title='收藏的面试经验'></mm-cell>
      </div>
    </div>
  </div>
</template>

<script>
// 导入单元格组件
import mmCell from '@/components/mmCell'
// 导入辅助函数
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'my',
  components: {
    mmCell
  },
  // 计算属性
  computed: {
    // 用户信息
    ...mapState(['userInfo']),
    // 头像地址
    ...mapGetters(['avatarUrl'])
  },
  methods: {
    // 点击头像跳转到个人资料
    hToMyInfo () {
      this.$router.replace('/myInfo')
      console.log(this.userInfo)
    },
    // 点击我的岗位跳转到编辑页
    hEditJob (prop) {
      this.$router.replace(`/editInfo?prop=${prop}&redirect=my`)
    },
    // 点击我的信息跳转
    hToMyMessage () {
      this.$router.replace('/myMessage')
    }
  }
}
</script>

<style lang='less'>
#my-container {
  height: 100%;
  .top-container {
    background-color: @main-color;
    padding-top: 31px;
    padding-bottom: 55px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px 28px 15px;
      .top-left {
        .nickname {
          font-size: 21px;
          color: @white-color;
          margin: 0;
        }
        .signature {
          font-size: 12px;
          color: @white-color;
          opacity: 0.7;
          margin-top: 10px;
          margin-bottom: 0;
        }
      }
      .top-right {
        margin-right: 22px;
        img {
          display: block;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          border: 3px solid rgba(255,255,255,0.38);
        }
      }
    }
    .bottom {
      padding-left: 23px;
      padding-right: 30px;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          span {
            &.num {
              display: block;
              text-align: center;
              font-size: 21px;
              font-weight: 600;
              color: @white-color;
              i {
                font-size: 12px;
                font-weight: 400;
                opacity: 0.7;
              }
            }
            &.sub {
              font-size: 12px;
              opacity: 0.7;
              color: @white-color;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
  .bottom-container {
    position: relative;
    padding: 15px;
    margin-bottom: 45px;
    .one-cell {
      position: absolute;
      top: -39px;
    }
    .cell-group {
      margin-top: 10px;
      overflow: hidden;

    }
    .circle {
      border-radius: 8px;
    }
    .data-show {
      background-color: @white-color;
      padding: 19px 29px 16px 15px;
      margin-top: 11px;
      .title {
        font-size: 14px;
        font-weight: 600;
        color: @main-font-color;
        margin: 0;
      }
      .data-group {
        display: flex;
        justify-content: space-between;
        padding-left: 10px;
        margin-top: 18px;
        text-align: center;
        .up-num {
          font-size: 10px;
          color: @minor-font-color;
          span {
            color: @assist-color;
          }
        }
        .all-num {
          margin-top: 10px;
          font-size: 21px;
          font-weight: 700;
          color: @main-font-color;
        }
        .all-name {
          margin-top: 6px;
          font-size: 12px;
          color: @subdominant-font-color;
        }
      }
    }
  }
}
</style>
